<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部保持与主页完全一致 -->
      <el-header>
        <div class="header-left">
          <img src="../images/logo.png" alt="logo" class="logo" />
          <span @click="router.push('/')">首页</span>
          <span>我的音乐</span>
          <span>发现音乐</span>
        </div>
        <div class="header-right">
          <input type="text" class="search-input" placeholder="搜索音乐" />
          <el-button class="search-btn">搜索</el-button>
          <span class="login-link" @click="router.push('/')"
            >已有账号？立即登录</span
          >
        </div>
      </el-header>

      <!-- 注册内容区域 -->
      <el-main class="register-main">
        <div class="register-container">
          <h2 class="register-title">用户注册</h2>

          <div class="register-form">
            <!-- 用户名 -->
            <div class="form-item">
              <el-input
                placeholder="用户名（4-16位）"
                class="custom-input"
                v-model="username"
              >
                <template #prefix>
                  <el-icon class="input-icon"><User /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 密码 -->
            <div class="form-item">
              <el-input
                type="password"
                placeholder="密码（6-20位）"
                class="custom-input"
                show-password
                v-model="password"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 确认密码 -->
            <div class="form-item">
              <el-input
                type="password"
                placeholder="确认密码"
                class="custom-input"
                show-password
                v-model="confirmPassword"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Lock /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 手机号 -->
            <div class="form-item">
              <el-input
                placeholder="手机号"
                class="custom-input"
                v-model="phone"
              >
                <template #prefix>
                  <el-icon class="input-icon"><Iphone /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 邮箱 -->
            <div class="form-item">
              <el-input placeholder="邮箱" class="custom-input" v-model="email">
                <template #prefix>
                  <el-icon class="input-icon"><Message /></el-icon>
                </template>
              </el-input>
            </div>

            <!-- 注册按钮 -->
            <el-button class="register-btn" @click="register"
              >立即注册</el-button
            >
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { User, Lock, Iphone, Message } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";

const router = useRouter();
const username = ref("");
const password = ref("");
const confirmPassword = ref("");
const phone = ref("");
const email = ref("");
const generateToken = () => {
  // 生成随机 token
  return (
    Math.random().toString(36).substr(2) + Math.random().toString(36).substr(2)
  );
};
const register = async () => {
  // 校验用户名、密码、确认密码、手机号、邮箱
  if (username.value.length < 4 || username.value.length > 16) {
    ElMessage.error("用户名长度必须在4 - 16位之间 ");
    return;
  } else if (password.value.length < 6 || password.value.length > 20) {
    ElMessage.error("密码长度必须在6 - 20位之间 ");
    return;
  } else if (password.value !== confirmPassword.value) {
    ElMessage.error("两次输入的密码不一致 ");
    return;
  } else if (phone.value.length !== 11) {
    ElMessage.error("手机号长度必须为11位 ");
    return;
  } else if (!email.value.includes("@")) {
    ElMessage.error("邮箱格式不正确 ");
    return;
  }

  try {
    // 发送注册请求到后端
    const response = await axios.post("http://localhost:3001/api/register", {
      username: username.value,
      password: password.value,
      email: email.value,
      phone: phone.value,
      token: generateToken().toString(),
    });

    // 注册成功提示
    ElMessage.success("注册成功");
    // 跳转到首页
    router.push("/");
  } catch (error) {
    // 注册失败提示
    ElMessage.error("注册失败，请稍后重试");
    console.error("注册请求出错:", error);
  }
};
</script>

<style scoped>
/* 头部样式保持完全一致 */
.el-header {
  background-color: black;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  width: 140px;
  height: 140px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.header-left span {
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s;
}

.header-left span:hover {
  color: #ff4d4f;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-input {
  width: 300px;
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 20px;
  background-color: #333;
  color: white;
  font-size: 16px;
}

.search-input::placeholder {
  color: #666;
}

.search-btn {
  height: 40px;
  padding: 0 30px;
  border: none;
  border-radius: 20px;
  background-color: #ff4d4f;
  color: white;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #ff1919;
}

.login-link {
  color: #999;
  cursor: pointer;
  transition: color 0.3s;
}

.login-link:hover {
  color: #ff4d4f;
}

/* 注册主区域 */
.register-main {
  background-color: #1e1e1e;
  min-height: calc(100vh - 140px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-container {
  width: 500px;
  padding: 40px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.register-title {
  color: white;
  font-size: 24px;
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
  position: relative;
  padding-bottom: 15px;
}

.register-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: #ff4d4f;
}

/* 表单样式 */
.form-item {
  margin-bottom: 25px;
}

.custom-input .el-input__wrapper {
  background-color: #333;
  border-radius: 25px;
  padding: 0 20px;
  box-shadow: none;
}

.custom-input .el-input__inner {
  color: white;
  height: 48px;
  font-size: 16px;
}

.custom-input .el-input__inner::placeholder {
  color: #666;
}

.input-icon {
  color: #666;
  font-size: 18px;
  margin-right: 10px;
}

/* 注册按钮 */
.register-btn {
  width: 100%;
  height: 48px;
  background-color: #ff4d4f;
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 16px;
  margin-top: 20px;
  transition: all 0.3s;
}

.register-btn:hover {
  background-color: #ff1919;
  transform: scale(1.02);
}
</style>
